
<template>
    <!-- <div style="width:100vw;height:100vh;overflow: hidden;">
    <div class="main"> -->
<!-- 表单数据 -->
      <div class="data">
        <!-- <div class="tableList"> -->
          <el-table
            :data="table_data.data"
            :row-class-name="tableRowClassName"
            height="100%"
            style="width: 100%">
            <el-table-column
              v-if="is_index"
              type="index"
              label="序号"
              align="center"
              width="50">
            </el-table-column>
            <template v-for="header in table_data.header" >
              <el-table-column
                :prop= header.id
                :label=header.name
                align="center"
                >
              </el-table-column>
            </template>

            <el-table-column
              v-if="is_view"
              label="查看"
              align="center"
              >
              <template slot-scope="scope">
                <i class="el-icon-view btn"></i>
              </template>
            </el-table-column>

          </el-table>
        </div>
      <!-- </div> -->

    <!-- </div>
  </div> -->
</template>

<script>
export default {
  props:{
    table_data:{
      type:Object,
      required:true
    },
    is_index:{
      type:Boolean,
      default:false
    },
    is_view:{
      type:Boolean,
      default:false
    },
    is_stripe:{
      type:Boolean,
      default:false
    }
  },
  data() {
    return {
      table_data01: {
        header:[
          {id:'address',name:'地址'},
          {id:'reason',name:'原因'},
          {id:'state',name:'状态'},
        ],
        data:[
          {
            address: '停车场B1',
            reason: '跳闸',
            state: '待处理'
          }, {
            address: '停车场B3',
            reason: '跳闸',
            state: '待处理'
          }, {
            address: '停车场B3',
            reason: '跳闸',
            state: '待处理'
          }
          , {
            address: '停车场B3',
            reason: '跳闸',
            state: '待处理'
          }
          , {
            address: '停车场B3',
            reason: '跳闸',
            state: '待处理'
          }
          , {
            address: '停车场B3',
            reason: '跳闸',
            state: '待处理'
          }
        ]
      }
    } 
  },
  methods:{
    tableRowClassName({row, rowIndex}) {
      let this_ = this;
      if(this_.$props.is_stripe){
        if (rowIndex % 2 == 0) {
              return 'one_row';
            } else if (rowIndex % 2 == 1) {
              return 'tow_row';
            }
            return '';
        }else{
          return '';
        }
      },
  },
  created(){
  },
  mounted(){
  }
}
</script>

<style scoped lang="less">
@import '../../assets/css/chuShiHua.less';
.main{
    width: calc((100% - 2vw) * 0.24);
    height: calc(((92% - 2vh)  * 0.95 * 0.32) - 4vh );
    background: #050505;
    margin: 50px;
    padding: 1vh 1vw;
  }

.data{
  width: 100%;
  height: 100%;
}
.tableList{
  width: 105%;
  height: 100%;
  overflow-y: scroll;
}
.btn{
  cursor: pointer;
}

/deep/ .el-table {
  //表头样式
  .el-table__header-wrapper .has-gutter .el-table__cell{
    background-color: #2f3639;
    color: #ddd;
    border-bottom: none;
    padding: 4px 0;
  }
  //表格样式
  .el-table__body-wrapper .el-table__row{
    background-color: #050505;
    color: #ddd;
    
    //取消表格底边框
    .el-table__cell{
      border-bottom: none;
      padding: 0 0;
    }
  }

  .el-table__body-wrapper .el-table__row.one_row{
    background-color: #050505;
  }
  .el-table__body-wrapper .el-table__row.tow_row{
    background-color: #131516;
  }

  //表格行触摸效果
  .el-table__body-wrapper .el-table__body .el-table__row:hover>td.el-table__cell{
    background-color: transparent;
  }
}
//取消表格底部边框
/deep/.el-table::before{
  background-color: #ffffff00;
}
//取消表格背景
/deep/.el-table, .el-table__expanded-cell{
  background-color: #fff0;
}


//滚动条样式
/deep/ .el-table--scrollable-y .el-table__body-wrapper::-webkit-scrollbar{
  width: 10px !important;
  padding-left: 5px !important;
  cursor: pointer !important;
}
/deep/ .el-table--scrollable-y .el-table__body-wrapper::-webkit-scrollbar-button{
  opacity: 0 !important;
}
/deep/ .el-table--scrollable-y .el-table__body-wrapper::-webkit-scrollbar-thumb{
  background: rgba(31,198,255,0) !important;
  border-radius: 4px 4px 4px 4px;
  cursor: pointer;
}
/deep/ .el-table--scrollable-y .el-table__body-wrapper::-webkit-scrollbar-thumb:hover{
  background: rgba(31, 198, 255, 0.3) !important;
}
/deep/ .el-table--scrollable-y .el-table__body-wrapper::-webkit-scrollbar-track {
  border-radius: 4px 4px 4px 4px !important;
} 


</style>
